<template>
  <div class="departments-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first" />
      </el-tabs>
      <div class="box">
        <!-- 头部 -->
        <!-- <el-row>
          <el-col :span="20"> 江苏传智播客教育科技股份有限公司</el-col>
          <el-col :span="4">
            <el-row class="right-box">
              <el-col :span="12">负责人</el-col>
              <el-col
                :span="12"
              ><el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown></el-col>
            </el-row></el-col>
        </el-row> -->
        <depart :depart="depart" :get-department="getDepartment" />
        <hr />

        <!-- 树形 -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <template slot-scope="{ data }">
            <!-- <pre>{{ data }}</pre> -->
            <!-- <el-row>
                <el-col :span="20"> {{ data.name }}</el-col>
                <el-col :span="4">
                  <el-row class="right-box">
                    <el-col :span="12">{{ data.manager }}</el-col>
                    <el-col
                      :span="12"
                    ><el-dropdown>
                      <span class="el-dropdown-link">
                        操作<i class="el-icon-arrow-down el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>添加子部门</el-dropdown-item>
                        <el-dropdown-item>编辑部门</el-dropdown-item>
                        <el-dropdown-item>删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown></el-col>
                  </el-row></el-col>
              </el-row> -->
            <depart
              :depart="data"
              :tree-flag="true"
              :get-department="getDepartment"
            />
          </template>
        </el-tree>
        <el-button @click="flag = true">按钮</el-button>
        <dia :flag.sync="flag" />
      </div>
    </el-card>
  </div>
</template>

<script>
import dia from './components/dia.vue'
import { getDepartmentApi } from '@/api/departments'
// import { todo } from '@/utils/'
import arrayToTree from 'array-to-tree'
export default {
  name: '',
  components: {
    dia
  },
  data() {
    return {
      flag: false,
      activeName: 'first',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      depart: {}
    }
  },
  computed: {},
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentApi()
      //  console.log(res, 8)
      this.depart = {
        id: '', // 添加的时候可以传pid为‘’
        companyId: res.data.companyId,
        manager: res.data.companyManage || '负责人',
        name: res.data.companyName
      }
      // this.list = todo(res.data.depts)
      this.list = arrayToTree(res.data.depts, {
        parentProperty: 'pid',
        customID: 'id'
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
.departments-container {
  .el-card {
    padding: 40px;
    .box {
      padding: 40px 60px;
      .right-box {
        text-align: right;
      }

      .el-tree {
        .el-row-box {
          flex: 1;
          .el-col-12 {
            height: 26px;
          }
        }
      }
    }
  }
}
</style>
